<html>
    <head>
        <title>Highcharts 带标签曲线</title>
        <meta charset="utf-8">
        <style>
            .container{
                width: 550px;
                height: 400px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
        <script src="../lib/jquery-3.5.1.min.js"></script>
        <script src="../lib/highcharts.js"></script>
        <script>            
            $(function(){
                var title = {text: '城市平均气温'};
                var subtitle = { text: '来源教程'};
                var xAxis = {
                    categories: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
                };
                var yAxis = {
                    title: { text: '温度(\xB0C)'}
                };
                var plotOptions = {
                    line: { dataLabels: { enabled: true }, enableMouseTracking: false }
                };
                // 提示
                var tooltip = { valueSuffix: '\xB0C' };
                // 图例
                var legend = {layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0};
                // 数据
                var series = [
                    {name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]},
                    {name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]},
                    {name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, 
                    {name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }
                ];
                var data = {title: title, subtitle: subtitle, xAxis: xAxis, yAxis: yAxis, tooltip: tooltip, legend: legend, series:series, plotOptions: plotOptions};
                $(".container").highcharts(data);
            });
        </script>
    </body>
</html>